{% extends 'base/base.html' %}
{% load my_tags_filters %}

{% block css %}
    <style>
        .head {
            width: 200px;
            height: 200px;
            border: 1px solid lightblue;
            border-radius: 50%;
            background: url("/media/{{ request.user.head }}") no-repeat center;
            background-size: contain;
        }

        .head input {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0;
        }


    </style>
{% endblock %}


{% block js %}
    <script>
        window.onload = function () {
            let head_input = document.querySelector(".head input");
            let head = document.querySelector(".head");
            head_input.onchange = function () {

                const fileReader = new FileReader()
                fileReader.onload = function (e) {
                    console.log(e.target.result)
                    head.style.backgroundImage = `url(${e.target.result})`;
                }
                fileReader.readAsDataURL(this.files[0])
            }

        }

    </script>

{% endblock %}

{% block main %}

    <h1>个人中心</h1>
    <ul class="list-group">
        <li class="list-group-item">用户名:{{ request.user.username }}</li>
        <li class="list-group-item ">头像:
            <div class="head"></div>
        </li>
        <li class="list-group-item">注册时间:{{ request.user.date_joined }}</li>
        <li class="list-group-item">最后登录时间:{{ request.user.last_login }}</li>
    </ul>

{% endblock %}